<template>
  <view class="login">
    <button
      class="avatar-wrapper"
      open-type="chooseAvatar"
      @chooseavatar="onChooseAvatar"
    >
      <image class="avatar" :src="avatarUrl"></image>
    </button>
    <input type="nickname" class="weui-input" placeholder="请输入昵称" />
    <button class="login_btn">登录</button>
  </view>
</template>
<script>
export default {
  data() {
    return {
      avatarUrl:
        "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
    };
  },

  mounted() {},

  methods: {
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail;
      this.avatarUrl = avatarUrl;
    },
  },
};
</script>
<style lang="scss" scoped>
.login {
  height: 100vh;
  width: 100%;
  padding: 20vh 50rpx 0 50rpx;
  box-sizing: border-box;
}
.login_btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(90deg, #00a67a, #057748);
  border-radius: 40rpx;
  color: #fff;
}
</style>